<template>
	<div>
		<div class="template" v-show="Loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>售后列表</div>
			<div></div>
		</header>
		<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
			<div class="goodslist" v-for='item in goods'>
				<div class="aftersalelist">
					<div class="aftersalelist_t">
						<div>服务单号：{{item.afterSaleId}}</div>
						<div v-if='item.dealState == "001"'>退款中</div>
						<div v-if='item.dealState == "002"'>换货关闭/退货关闭</div>
						<div v-if='item.dealState == "003"'>待处理</div>
						<div v-if='item.dealState == "004"'>售后拒绝</div>
						<div v-if='item.dealState == "005"'>同意换货填写物流</div>
						<div v-if='item.dealState == "006"'>退款成功</div>
						<div v-if='item.dealState == "007"'>撤销申请</div>
						<div v-if='item.dealState == "008"'>已审核</div>
						<div v-if='item.dealState == "009"'>已完成</div>
						<div v-if='item.dealState == "010"'>换货中</div>
						<div v-if='item.dealState == "011"'>维修中</div>
						<div v-if='item.dealState == "012"'>同意退货填写物流</div>
						<div v-if='item.dealState == "014"'>退款失败</div>
					</div>
				</div>
			
				<div class="goods">
					<div class="goodsImg">
						<img :src="item.good.goodsImg">
					</div>
					<div class="goodsName_d">
						<div class="goodsName">{{item.good.goodsName}}</div>
						<div class="specification"><span v-for='(items,index) in item.good.param'>{{index}}{{items}}&nbsp;</span></div>
					</div>
					<div class="price">
						<div>￥{{item.good.price}}</div>
						<div>￥{{item.good.orginPrice}}</div>
						<div>×{{item.good.count}}</div>
					</div>
				</div>
				<div class="total">共计{{item.totalCount}}件商品&nbsp;&nbsp;合计:￥{{item.totalAmount}}(含运费￥{{item.expressFee}})</div>
				<div class="dispose">
					<div v-if='item.dealState == "001"'>退款中</div>
					<div v-if='item.dealState == "002"'>换货关闭/退货关闭</div>
					<div v-if='item.dealState == "003"'>待处理</div>
					<div v-if='item.dealState == "004"'>售后拒绝</div>
					<div v-if='item.dealState == "005"'>同意换货填写物流</div>
					<div v-if='item.dealState == "006"'>退款成功</div>
					<div v-if='item.dealState == "007"'>撤销申请</div>
					<div v-if='item.dealState == "008"'>已审核</div>
					<div v-if='item.dealState == "009"'>已完成</div>
					<div v-if='item.dealState == "010"'>换货中</div>
					<div v-if='item.dealState == "011"'>维修中</div>
					<div v-if='item.dealState == "012"'>同意退货填写物流</div>
					<div v-if='item.dealState == "014"'>退款失败</div>
					<div>你的服务已申请成功，待处理中</div>
				</div>
			</div>
		</ul>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				token:'',
				goods:[],
				index:0,
				loading:'',
				Loading:'true'
			}
		},
		created(){
			this.token = localStorage.getItem('token');
			//售后列表
			
		},
		methods:{
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			list(){
				this.Loading = true;
				var url = BaseUrl + 'orders/afterSale/list?appId=wap' + '&token=' + this.token + "&start=" + this.index + '&length=5';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						this.Loading = false;
//						this.goods = res.data.data;
						this.goods = this.goods.concat(res.data.data);
						if(res.data.data == "") {
							this.loading = true;
							Toast({
								message: "没有更多的数据",
								position: 'middle',
								duration: 1000
							})
							return;
						} else if(res.data.data != "") {
							this.loading = false;
							this.index++;
						}
					}
				}).catch(error=>{
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			loadMore(){
				this.Loading = this.Loading;
				if(this.loading == false){
					setTimeout(() => {
						this.list(this.index);
						this.Loading = this.Loading;
					}, 100);
				}
			},
		}
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		/*background: rgba(0,0,0,0.5);*/
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
		border-bottom: 1px solid #e8dddd;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.aftersalelist_t{
		display: flex;
		justify-content: space-between;
		padding: 0.2rem 0.25rem;
		border-bottom: 1px solid #CCCCCC;
	}
	.aftersalelist_t div:first-child{
		color: #b5b5b5;
		font-size: 0.25rem;
	}
	.aftersalelist_t div:last-child{
		color: #ff2040;
		font-size: 0.25rem;
	}
	.goodslist{
		border-bottom: 0.2rem solid #f2f2f2;
		border-top: 0.2rem solid #f2f2f2;
	}
	.goods{
		margin-top:0.2rem;
		padding: 0.2rem 0.25rem;
		background: #f5f5f5;
		display: flex;
		justify-content: space-between;
	}
	.goodsImg{
		width: 1.5rem;
		height: 1.5rem;
	}
	.goodsImg img{
		width: 100%;
		height: 100%;
	}
	
	.goodsName_d{
		width: 4.5rem;
	}
	
	.goodsName{
		font-size: 0.26rem;
		color: 323232;
		height: 0.8rem;
		overflow: hidden;
	  	text-overflow:ellipsis;
	  	display: -webkit-box;
	  	-webkit-line-clamp: 2;
	  	-webkit-box-orient: vertical;
	  	width:3.4rem;
	}
	
	.specification{
		font-size: 0.21rem;
		color: #b6b6b6;
		margin-top: 0.1rem;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	
	.price{
		text-align: right;
	}
	.price div:nth-child(1){
		font-size: 0.17rem;
		color: #323232;
	}
	.price div:nth-child(2){
		font-size: 0.17rem;
		color: #989898;
		text-decoration: line-through;
	}
	.price div:nth-child(3){
		font-size: 0.17rem;
		color: #989898;
	}
	.total{
		text-align: right;
		padding: 0.35rem 0;
		margin: 0 0.25rem;
		color: #323232;
		border-bottom: 1px solid #ccc;
	}
	.dispose{
		padding: 0.1rem 0.25rem;
		display: flex;
		align-items: center;
	}
	.dispose div:first-child{
		color: #ff2040;
		font-size: 0.3rem;
		margin-right: 0.2rem;
	}
	.dispose div:last-child{
		color: #b3b3b3;
		font-size: 0.25rem;
	}
</style>